<template>
  <div class="container" :class="[{'isDay':isDay}]">
    <header>
      <div class="top_header">
        <span>DASHBOARD</span>
        <img v-if="!isDay" src="../../assets/PC_black/仪表@2x.png" alt="">
        <img v-else src="../../assets/PC_day/模块@2x.png" alt="">
      </div>
    </header>

    <div class="card_contaner">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
          <div class="card card1">
            <div class="title_card1">
              <span>Total Value Locked</span>
              <img src="../../assets/PC_black/锁@2x.png" alt="">
            </div>
            <div class="money_card1">＄0.00</div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
          <div class="card card2">
            <div class="title_card1">
              <span>Global</span>
              <img src="../../assets/PC_black/金币@2x.png" alt="">
            </div>
            <div v-for="(item, idx) in moneyData" :key="idx" class="money_card2">
              <span>{{item.title}}</span>
              <span>{{item.money}}</span>
            </div>

          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="card card3">
            <div class="card3_left">
              <div class="title_card1">
                <span>You info</span>
                <img src="../../assets/PC_black/我的资料@2x.png" alt="">
              </div>
              <div>
                Total Collateral
              </div>
              <div>
                ＄0.00
              </div>
              <div>
                Total Borrow
              </div>
              <div>
                ＄0.00
              </div>
            </div>

            <div class="card3_right">
              <div class="card3_right_top">Your Positions</div>
              <div class="card3_right_mid">*To do more actions with your position,
                please go to Your Positions page.</div>
              <div class="card3_right_bottom">
                <span>You don't have any active positions.</span>
                <div>More</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="content">
      <section class="content_header">
        <div class="top_header">
          <span>Farm Pools</span>
          <img v-if="isDay" src="../../assets/PC_day/矿池@2x.png" alt="">
          <img v-else="isDay" src="../../assets/PC_black/矿池@2x.png" alt="">
        </div>

        <div class="top_header content_header_right">
          <span class="content_header_right_text">Impermanent Loss Calculator</span>
          <img src="../../assets/PC_black/计算器@2x.png" alt="">
        </div>
      </section>
      <section class="content_tab">
<!--        <div class="content_tab_item" :class="[{active_tab:seletIdx===idx}]" v-for="(item, idx) in tabList" :key="idx">-->
<!--          {{item}}-->
<!--        </div>-->
      </section>
      <section class="content_sort">
        <div @click="sortClick(idx)" class="content_sort_item" :class="[{active_sort:seletSortIdx===idx}]" v-for="(item, idx) in sortList" :key="idx">
          {{item}}
        </div>
      </section>

      <el-table
        class="content_table"
        :header-cell-style="{border: '1px solid transparent',color: isDay?'#000000':'#fff', backgroundColor:isDay?'#FFFFFF':'#181A23', fontFamily: 'Arial',fontSize:'12px'}"
        :cell-style="{border: '1px solid transparent',color: isDay?'#000000':'#fff', backgroundColor:isDay?'#FFFFFF':'#181A23', fontFamily: 'Arial',fontSize:'12px'}"
        :data="listDat"
        style="width: 100%"
        >
        <el-table-column
          type="index"
          label="#"
        >
        </el-table-column>
        <el-table-column
          prop="poolName"
          label="池"
          width="150">
          <template slot-scope="scope">
            <div class="icon">
              <img :src="scope.row.poolImgUrl" alt="">
<!--              <img src="../../assets/196.png" alt="">-->
              <span>{{scope.row.poolName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="对"
         >
          <template slot-scope="scope">
            <div class="pair">
              <span>{{scope.row.pair}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="province"
          label="总锁定价值"
          width="120">
          <template slot-scope="scope">
            <div class="total">
              <span>${{scope.row.totalStake.toFixed(2)}}</span>
              <span>{{(scope.row.totalStakeRatio * 100).toFixed(2)}}%</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="收益类型"
          width="120"
          >
          <template slot-scope="scope">
            <div class="earnings_type">

              <img :src="scope.row.rewards[0].cryptoImgUrl" alt="">
              <span>{{scope.row.rewards[0].symbol}}</span>

            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="评级"
        >
          <template slot-scope="scope">
            <div :style="{backgroundColor:scope.row.score==='A'?'rgb(215,243,231)':'#FF6363',color:scope.row.score==='A'?'rgb(108,198,143)':'#FFF'}" class="rating">
              {{scope.row.score}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="无常损失"
         >
          <template slot-scope="scope">
            <div :style="{backgroundColor:scope.row.impermanentLoss==='Low'?'rgb(215,243,231)':'#FF6363',color:scope.row.impermanentLoss==='Low'?'rgb(108,198,143)':'#FFF'}" class="loss">
              {{scope.row.impermanentLoss}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="年收益率"
          >
          <template slot-scope="scope">
            <div class="total">
              <span>{{(scope.row.dailyROI * 100).toFixed(2)}}%每年</span>
              <span>{{(scope.row.totalStakeRatio * 100).toFixed(2)}}%每日</span>
            </div>
          </template>
        </el-table-column>
      </el-table>


    </div>
  </div>
</template>

<script>
  import { farmDetail} from '../../service/getData';
  export default {
    name: "",
    computed: {

      isDay: {
        get() {
          return this.$store.state.isDay;
        },
        set(val) {
          this.$store.state.isDay = val;
        },
      },
    },
    data () {
      return {

        // 接口数据
        listDat: [],
        //sort排序
        seletSortIdx: 0,
        // sort排序数据
        sortList: ['APY排序', 'TheForce评级排序', '总质押量排行'],

        //选中的tab
        seletIdx: 0,
        // tab数据
        tabList: ['All', 'Project list', 'Theforse rating'],
        // 余额数据
        moneyData: [
          {
            title: 'Total Collateral',
            money: '$0.00'
          },
          {
            title: 'Total Borrow',
            money: '$0.00'
          },
          {
            title: 'Active Positions',
            money: '0 Positions'
          },
        ]
      }
    },
    methods: {
      async getFarmDetail () {
        const {data: res} =  await farmDetail();
        console.log(res);
        this.listDat = res.data;
      },
      sortClick (idx) {
        this.seletSortIdx=idx;
        if (idx === 0) {
          this.getFarmDetail();
        }else  if (idx === 1) {
           let arr =this.listDat.sort((a, b) => {
            return a['score'].localeCompare(b['score'])     // grapheme为字母对应的属性名
          });

           this.listDat = arr;

        }else {

          let arr =this.listDat.sort((a, b) => {
            return b['totalStake']- a['totalStake']    // grapheme为字母对应的属性名
          });

          this.listDat = arr;
        }

      }
    },
    mounted() {
      this.getFarmDetail();
    }
  }
</script>

<style lang="less" scoped>

  .container {
    .nBg;
    margin: 54px 115px ;

    box-sizing: border-box;
    flex: 1;

    width: calc(100% - 225px);
    height: calc(100% - 67px);

    /*头部区域开始*/
    .top_header {
      margin-left: 5px;

      display: flex;
      align-items: center;

      img {
        height: 20px;
        width: 20px;
        margin-left: 15px;
      }

      span {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 26px;
        color: #FFFFFF;
      }
    }

    .el-row {
      align-items: center;
    }

    .card_contaner {
      width: 100%;
      box-sizing: border-box;

    }

    .card {
      width: 100%;
      box-sizing: border-box;
      margin-top: 20px;
      /*width: 346px;*/
      min-height: 211px;
      background: linear-gradient(180deg, #5B33BE 0%, #6F4ACE 100%, #704BCE 100%);
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      border-radius: 10px;


      .title_card1 {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 20px;

        img {
          height: 20px;
          width: 20px;
          margin-left: 10px;
        }
        span {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #FFFFFF;
        }
      }
      .money_card1 {
        box-sizing: border-box;
        width: 100%;
        text-align: justify;
        text-justify: newspaper;
        word-break: break-all;
        margin-top: 47px;
        margin-left: 45px;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
      }
    }

    /*.card1 {*/
    /*  <!--.bis('../../assets/cardbg.png')-->*/
    /*}*/



    .card2 {
      background: linear-gradient(180deg, #FFA216 0%, #E99A31 100%);
      box-shadow: 0px 3px 6px rgba(255, 205, 4, 0.16);

      .title_card1{
        /*margin-bottom: 17px;*/
      }
      .money_card2 {
        display: flex;
        justify-content: space-between;
        padding:0px 10px 10px 10px;

        span {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          text-align: justify;
          text-justify: newspaper;
          word-break: break-all;
        }
      }
    }

    .card3 {
      display: flex;
      justify-content: space-between;
      background: linear-gradient(180deg, #2787FF 0%, #0077FF 100%);
      box-shadow: 0px 3px 6px rgba(255, 205, 4, 0.16);

      .card3_left div {
        padding-left: 20px;
        padding-bottom: 15px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        color: #FFFFFF;
      }

      .card3_left {
        div:nth-of-type(3), div:nth-of-type(5){
          font-size: 20px;
          font-weight: bold;
        }
      }

      .card3_right {
        width: 60%;
        .card3_right_top {
          font-size: 14px;
          font-family: Microsoft YaHei;
          color: #FFFFFF;
          margin-top: 20px;

        }

        .card3_right_mid {
          padding: 10px 18px;
          margin-top: 10px;
          background-color: #3B92FF;
          border-radius: 10px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          margin-right: 70px;
          line-height: 19px;
          color: #FFFFFF;
          /*height: 115px;*/


        }

        // 垂直居中
        .card3_right_mid::before{
          display: inline-block;
          content: "";
          height: 100%;
          vertical-align: middle;
        }

        .card3_right_bottom {
          display: flex;
          align-items: center;
          margin: 10px 20px;
          span {
            font-size: 14px;
            line-height: 19px;
            color: #FFFFFF;
          }
          div {
            width: 56px;
            height: 19px;
            background: #F79F1A;
            opacity: 1;
            border-radius: 10px;
            font-size: 14px;
            line-height: 19px;
            color: #FFFFFF;
            text-align: center;
          }
        }
      }

    }

    /*头部区域结束*/

    /*内容区域开始*/
    .content {
      .nNavbg;
      box-shadow: 3px 20px 30px rgba(198, 209, 218, 0.08);
      border-radius: 10px;
      margin-top: 36px;
      padding: 15px 20px;
      /*头*/
      .content_header {
        display: flex;
        justify-content: space-between;


        .content_header_right {
          height: 30px;
          width: 257px;
          border-radius: 15px;
          text-align: center;
          padding-left: 10px;
          background: #F79F1A;
          span {
            font-size: 14px;
          }
        }

      }

      /*  tab内容*/
      .content_tab {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 2px;
        border-bottom: 2px solid #000;
        margin-top: 15px;

        /*tab*/
        .content_tab_item {
          font-size: 16px;

          line-height: 50px;
          color: #FFFFFF;
        }
        .active_tab {
          border-bottom: 2px solid #2787FF;
        }


      }

      /*排序*/
      .content_sort {
        display: flex;
        margin-bottom: 15px;
        justify-content: space-around;
        .content_sort_item {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: 18px;
          font-size: 12px;
          line-height: 22px;
          color: #FFFFFF;
          height: 22px;
          text-align: center;
          padding: 0 15px;
          border-radius: 11px;
          background-color: transparent;
        }
        .active_sort {
          background-color: #2787FF;
        }
      }

      /*列表*/
      .content_table{
        font-size: 12px;
        line-height: 16px;
        color: #FFFFFF;
        span {
          font-size: 12px;
          line-height: 18px;
          color: #FFFFFF;
        }

        .total {
          display: flex;
          flex-direction: column;
          span:nth-of-type(1){
            font-size: 14px;
          }
        }

        .icon {
          display: flex;
          align-items: center;
          img {
            height: 40px;
            width: 40px;
            min-width: 40px;
            min-height: 40px;
            border-radius: 50%;
            margin-right: 10px;
          }

        }

        .pair {
          span {
            font-size: 14px;
            line-height: 19px;
            color: #6D85FF;
          }
        }

        .rating, .loss {
          height: 20px;
          width: 45px;
          border-radius: 10px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          line-height: 20px;
          color: #000000;
          text-align: center;
          background-color: #FF6363;
          color: white;
        }

        .earnings_type {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 70px;
          height: 20px;
          background: #E5E5E5;
          border-radius: 10px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          line-height: 20px;
          color: #000000;
          text-align: center;

          img {
            height: 12px;
            width: 12px;
            margin-right: 5px;
          }
          span {
            color: #000000;
          }
        }

        .rating, .loss{

        }



      }
    }



     .el-table::before {
      z-index: inherit!important;

    }
    .el-table--scrollable-y .el-table__body-wrapper {
      overflow-y: hidden;
    }
    .el-table--scrollable-y .el-table__body-wrapper:hover {
      overflow-y: auto;
    }
    .el-scrollbar__wrap{overflow-x:hidden;overflow-y:hidden;}

    // 暂无数据的背景色
    .el-table /deep/ .el-table__empty-block {
      background-color: #181A23;
      border: none;
    }

    .el-table /deep/ .el-table__empty-block .el-table__empty-text {
      color: #fff;
      border: none;
    }


    .content_table {
      /deep/ .el-table__fixed-right {
        height: 100% !important; //设置高优先，以覆盖内联样式
      }
    }


    /*内容区域结束*/


  }
  .isDay {
    .dBg;
    .top_header span {
      color: #2787FF!important;
    }

    .el-table /deep/ .el-table__empty-block {
      background-color: white!important;
    }

    .el-table /deep/ .el-table__empty-block .el-table__empty-text {
      color: #000!important;
    }

    .content {
      .dNavbg!important;
    }

    .content_tab_item {

      color: #000!important;


    }

    .content_sort_item {

      color: #000!important;
      background-color: #F2F8FF!important;
    }

    .content_tab {
      border-bottom: 2px solid #F5F5F5!important;
    }

    .active_sort {
      background-color: #2787FF!important;
      color: white!important;
    }

    .content_header_right_text {
      color: white!important;
    }

    .content_header {

      .content_header_right {

        span {
          color: white!important;
        }
      }

    }

    /*列表*/
    .content_table{
      span {

        color: #000!important;
      }
    }


  }

  @media screen and (max-width: 800px){
    .container ,.isDay{
      margin: 10px 15px !important;
      left: 0!important;
      width: calc(100% - 30px)!important;


      .card_contaner {
        width: 98%;
        padding-left: 10%;
      }

      .card {
        width: 90%;
      }

      .content_header {
        display: flex;
        flex-direction: column;
        div:nth-last-of-type(1) {
          margin-top: 7px;
        }
      }
    }
  }

</style>
